<template>
<uni-video style="width: 100%;">
        <view class="uni-video-container" style="height: 225px; background-color:#282b2f;">
            <div class="uni-video-cover " style="background-color: unset;
z-index:0;">
        <image style="width:100%" v-if="backImage" :src="backImage"></image>
        <p v-else class="uni-video-cover-duration"> 音频{{isPlay?'播放':'暂停'}}中 </p>
</div>
        <view class="uni-video-bar uni-video-bar-full" >
            <view class="uni-video-controls">
                <view class="uni-video-control-button " :class="isPlay?'uni-video-control-button-pause':'uni-video-control-button-play'"  @click="triggerPlay"></view>
                <view class="uni-video-current-time"> {{dateFormart(currentTime)}} </view>
                <slider
                  max="100"
                  block-size="12"
                  class="uni-video-progress-container"
                  backgroundColor="hsla(0,0%,100%,.8)"
                  :value="progress"
                  @change="handleChange"
                  @changing="handleProgress"/>
               </slider>
                <view class="uni-video-duration"> {{dateFormart(duration)}} </view>
            </view>
        </view>
        </view>
 </uni-video>
    

</template>

<script>
import {dateFormart} from '@/utils/util.js'
export default {
  props: {
    audio: {
      type: String,
      default: ''
    },
    playbackRate:{
        type:Number,
        default:1
    },
    backImage:{
        type:String,
        default:''
    }
    
  },
  data () {
    return {
        dateFormart,
      innerAudioContext: null,
      isPlay: false,
      timer: null,
      currentTime: 0,
      duration: 0,
      progress: 0,
      intervalID: null,
      animationData:{}
    }
  },
  watch: {
    audio: {
      handler(val) {
        this.creatAudio()
      },
      deep: true,
      immediate: true
    },
    playbackRate:{
        handler(val){
            this._setPlaybackRate(val)
        },
      deep: true,
      immediate: true
    },
    isPlay:{
        handler(val){
            this.$emit('status',val)
        }
    }
  },
  destroyed () {
    this.innerAudioContext.destroy()
  },
  methods: {
    creatAudio () {
      this.innerAudioContext = uni.createInnerAudioContext(this)
      this.innerAudioContext.src = encodeURI(this.audio)
      this.innerAudioContext.sessionCategory = "soloAmbient"
      this.innerAudioContext.autoplay = false
      this.innerAudioContext.volume = 0
      this.innerAudioContext.startTime = 0
      this.innerAudioContext._audio.addEventListener('loadeddata',(e)=>{
          this.$emit('loadedmetadata',{detail:{buffered:100}},1)
      })
      // this.innerAudioContext.playbackRate = 2.0
      // this.innerAudioContext.play()
      // this.innerAudioContext.onTimeUpdate(() => {})
      // this.innerAudioContext.onCanplay(() => {
      //   this.duration = this.innerAudioContext.duration
      // })
      this.onCanplay()
      this.innerAudioContext.onCanplay((e) => {
        this.intervalID = setInterval(() => {
          if (this.innerAudioContext.duration !== 0) {
            clearInterval(this.intervalID);
            this.duration = this.innerAudioContext.duration
           this.currentTime = this.innerAudioContext.currentTime
          }
        }, 100);
      })
      setTimeout(() => {
        this.innerAudioContext.pause()
      }, 100)
    },
    triggerPlay(){
        if(this.isPlay){
            this.audioPause()
        }else{
            this.audioPlay()
        }
    },
    // 开始播放
    audioPlay () {
      if (this.dateFormart(this.currentTime) === this.dateFormart(this.duration)) {
        this.progress = 100
      }
      this.innerAudioContext.volume = 1
      const currentTime = Number(this.progress) === 100 ? 0 : (this.currentTime ? this.currentTime : 0)
      this.innerAudioContext.seek(currentTime)
      this.innerAudioContext.startTime = currentTime
      this.innerAudioContext._audio.playbackRate= this.playbackRate || 1
      this.innerAudioContext.play()
      this.isPlay = true
    },
    _setPlaybackRate(v){        
        this.innerAudioContext._audio.playbackRate = v
    },
    onCanplay () {
      this.innerAudioContext.onTimeUpdate(() => {
        this.currentTime = this.innerAudioContext.currentTime
        this.progress = (this.innerAudioContext.currentTime / this.innerAudioContext.duration * 100).toFixed(2)
      })
      this.innerAudioContext.onEnded(() => {
        if (this.isPlay) {
          this.isPlay = false
        }
      })
    },
    // 暂停播放
    audioPause () {
      this.innerAudioContext.pause()
      this.isPlay = !this.isPlay
    },
    // 拖动进度条
    handleProgress (event) {
      this.innerAudioContext.pause()
    },
    // 拖动进度条结束
    handleChange (event) {
      this.progress = event.detail.value
      this.currentTime = this.duration * (event.detail.value / 100)
      this.audioPlay()
    },
  }
}
</script>

<style >
    .container{
        height: 100vh;
      background: #ccc;
      display: grid;
      place-items: center;
    }
    .container .bars {
      width: 300px;
      height: 150px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }
    .container .bars .bar {
      height: 100%;
      width: 9%;
      background-color: red;
    }
    @-moz-keyframes sound {
      0% {
        opacity: 0.35;
        background: #f3f3f3;
        height: 1px;
      }
      100% {
        opacity: 1;
        background: #fff;
        height: 100%;
      }
    }
    @-webkit-keyframes sound {
      0% {
        opacity: 0.35;
        background: #f3f3f3;
        height: 1px;
      }
      100% {
        opacity: 1;
        background: #fff;
        height: 100%;
      }
    }
    @-o-keyframes sound {
      0% {
        opacity: 0.35;
        background: #f3f3f3;
        height: 1px;
      }
      100% {
        opacity: 1;
        background: #fff;
        height: 100%;
      }
    }
    @keyframes sound {
      0% {
        opacity: 0.35;
        background: #f3f3f3;
        height: 1px;
      }
      100% {
        opacity: 1;
        background: #fff;
        height: 100%;
      }
    }
</style>